<template>
  <div>
    <div style="height: 100%; padding: 12px">
      <el-card class="box-card" style="height: 690px">
        <div slot="header" class="clearfix">
          <div class="nav_font">
            <p @click="click_new('DeptManager', '部门管理')">部门管理</p>
          </div>
          <div class="nav_font2">
            <p @click="click_new('UserManager', '用户管理')">用户管理</p>
          </div>
          <div class="nav_font3">
            <p @click="click_new('RoleManager', '角色管理')">角色管理</p>
          </div>
          <div class="nav_font4">
            <p @click="click_new('ModeManager', '模块管理')">模块管理</p>
          </div>
          <div class="nav_font5">
            <p @click="click_new('DeptManager', '分类管理')">分类管理</p>
          </div>
          <div class="nav_font6">
            <p @click="click_new('ConstantManager', '常量管理')">常量管理</p>
          </div>
          <div class="nav_font7">
            <p @click="click_new('SystemManager', '系统日志')">系统日志</p>
          </div>
          <div class="nav_font8">
            <p @click="click_new('PersonalSettings', '个人设置')">个人设置</p>
          </div>
          <div class="nav_font9">
            <p @click="click_new('ParameterSettings', '参数设置')">参数设置</p>
          </div>
          <!-- <div class="head_right">
                        <el-input
                            placeholder="综合查询"
                            class="Input_box"
                            prefix-icon="el-icon-search"
                            v-model="query_words"
                            @change="top_query()"
                        >
                        </el-input>
                        <div class="input-item"></div>
                    </div> -->
        </div>
        <div class="main_class" :is="component"></div>

        <!-- <div class="table_box" style="">
                    <div class="block_bottom">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage4"
                            :page-sizes="[8, 16, 24, 32]"
                            :page-size="1"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="this.total"
                        >
                        </el-pagination>
                    </div>
                </div> -->
      </el-card>
    </div>
  </div>
</template>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
// import ConstantManager from "../constant_manager.vue";
import ConstantManager from "../system_setting/constant_manager.vue";
import DeptManager from "../system_setting/dept_manager.vue";
import ModeManager from "../system_setting/mode_manager.vue";
import RoleManager from "../system_setting/role_manager.vue";
import SystemManager from "../system_setting/system_manager.vue";
import UserManager from "../system_setting/user_manager.vue";
import ParameterSettings from "../system_setting/parameter_manager";
import PersonalSettings from "./personal_settings.vue";
export default {
  components: {
    DeptManager,
    UserManager,
    RoleManager,
    ConstantManager,
    ModeManager,
    SystemManager,
    ParameterSettings,
    PersonalSettings,
  },
  data() {
    return {
      component: "UserManager",
      pathname: "",
    };
  },
  methods: {
    //路径跳转
    click_new(path, pathname) {
      this.pathname = pathname;
      this.component = path;
      //每一次进来都清掉背景色
      $(".nav_font2 p").css(
        "cssText",
        "color:#fff;background-color:rgb(0,0,0,0)!important"
      );
      $(".nav_font3 p").css(
        "cssText",
        "color:#fff;background-color:rgb(0,0,0,0)!important"
      );
      $(".nav_font4 p").css(
        "cssText",
        "color:#fff;background-color:rgb(0,0,0,0)!important"
      );
      $(".nav_font5 p").css(
        "cssText",
        "color:#fff;background-color:rgb(0,0,0,0)!important"
      );
      $(".nav_font6 p").css(
        "cssText",
        "color:#fff;background-color:rgb(0,0,0,0)!important"
      );
      $(".nav_font7 p").css(
        "cssText",
        "color:#fff;background-color:rgb(0,0,0,0)!important"
      );
      $(".nav_font8 p").css(
        "cssText",
        "color:#fff;background-color:rgb(0,0,0,0)!important"
      );
      $(".nav_font9 p").css(
        "cssText",
        "color:#fff;background-color:rgb(0,0,0,0)!important"
      );
      $(".nav_font p").css(
        "cssText",
        "color:#fff;background-color:rgb(0,0,0,0)!important"
      );
      //选中的颜色添加背景色
      switch (pathname) {
        case "部门管理": {
          $(".nav_font p").css(
            "cssText",
            "color:#fff;background-color:rgb(180 118 17)!important"
          );
          break;
        }
        case "用户管理": {
          $(".nav_font2 p").css(
            "cssText",
            "color:#fff;background-color:rgb(180 118 17)!important"
          );
          break;
        }
        case "角色管理": {
          $(".nav_font3 p").css(
            "cssText",
            "color:#fff;background-color:rgb(180 118 17)!important"
          );
          break;
        }
        case "模块管理": {
          $(".nav_font4 p").css(
            "cssText",
            "color:#fff;background-color:rgb(180 118 17)!important"
          );
          break;
        }
        case "分类管理": {
          $(".nav_font5 p").css(
            "cssText",
            "color:#fff;background-color:rgb(180 118 17)!important"
          );
          break;
        }
        case "常量管理": {
          $(".nav_font6 p").css(
            "cssText",
            "color:#fff;background-color:rgb(180 118 17)!important"
          );
          break;
        }
        case "系统日志": {
          $(".nav_font7 p").css(
            "cssText",
            "color:#fff;background-color:rgb(180 118 17)!important"
          );
          break;
        }
        case "个人设置": {
          $(".nav_font8 p").css(
            "cssText",
            "color:#fff;background-color:rgb(180 118 17)!important"
          );
          break;
        }
        case "参数设置": {
          $(".nav_font9 p").css(
            "cssText",
            "color:#fff;background-color:rgb(180 118 17)!important"
          );
          break;
        }
      }

      //  this.$router.push({
      //         path: '/'+path
      //     })
    },
    changeLayout(type) {
      let $ = this.$;
      if (type === 1) {
        $(".right_box").show();
        $(".left-2").css("cssText", "position: relative;width: 100%;");
      } else if (type === 2) {
        $(".right_box").hide();
        $(".left-2").css("cssText", "position: absolute;width: 98%;");
      }
    },
  },
  mounted() {
    this.changeLayout(2);
  },
  destroyed() {
    this.changeLayout(1);
  },
};
</script>
<style lang="less" scoped>
.app {
  width: 93.5%;
  height: 100%;
  padding: 5px;
  border-radius: 10px;
}

/deep/ .el-table th > .cell {
  text-align: center;
}
/deep/ .el-table td,
.el-table th {
  text-align: center;
  border-bottom: 2px dashed rgb(161, 160, 160);
}

/* 分页组件样式 */
.block_1 {
  position: fixed;
  right: 50%;
  bottom: 12%;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

/deep/ .el-card__header {
  padding: 10px 18px;
  border-bottom: 1px solid #ebeef5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: rgb(233, 233, 233);
}

.box-card {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.click-item * {
  font-size: 15px;
  vertical-align: middle;
  font-weight: 600;
  margin-right: 10px;
  color: #fff;
}
.click-item1 {
  font-size: 15px;
  vertical-align: middle;
  font-weight: 600;
  margin-right: 10px;
  width: 120px;
  color: #fff;
}
.click-img {
  width: 20px;
  height: 20px;
}

/deep/ th {
  padding: 0px;
  padding-bottom: 5px;
}

.clearfix {
  display: flex;
  width: 100%;
}

.btn * {
  vertical-align: middle;
}

.btn {
  background-color: rgb(73, 152, 184);
  color: white;
  text-align: center;
  border-radius: 5px;
  width: 95px;
  position: absolute;
  right: 10%;
  height: 25px;
  line-height: 21px;
}

.input-item {
  position: relative;
  bottom: 12px;
  left: 30%;
  height: 10px;
}
.head_right {
  margin-left: 48%;
}
.Input_box {
  width: 300px;
}
.el-menu-item.is-active {
  background-color: orange !important;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  color: #fff;
}
.el-menu.el-menu--horizontal {
  height: 60px;
}
.table_box {
  margin-top: -50px;
}
.block_bottom {
  text-align: center;
  position: relative;
}
/deep/.el-card__header {
  padding: 10px 18px;
  border-bottom: 1px solid #ebeef5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #94c9d8;
  height: 50px;
}
.clearfix {
  display: flex;
  width: 100%;
}
.input-item {
  position: relative;
  bottom: 12px;
  left: 86%;
  height: 10px;
  width: 200px;
}
.el-dropdown-menu__item--divided::before {
  background-color: #94c9d8;
}
/deep/.el-dropdown-menu__item {
  color: #fff;
}
.src6 {
  height: 28px;
  width: 10px;
}
.el-button--danger {
  color: #fff;
  background-color: #dd7d7d;
  border-color: #dd7d7d;
  border-radius: 10px;
  height: 29px;
}
.el-button--danger {
  color: #fff;
  background-color: #dd7d7d;
  border-color: #dd7d7d;
  border-radius: 10px;
}
/* .el-button--primary {
    color: #fff;
    background-color: #5ca9d3;
    border-color: #5ca9d3;
    border-radius: 10px;
} */

/deep/.el-card__body {
  padding: 20px;
  height: 110px;
}
.nav_font p {
  height: 50px;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  font-size: 15px;
  width: 100px;
  margin-top: -10px;
  line-height: 50px;
  margin-left: -18px;
}
.nav_font2 p {
  height: 50px;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  font-size: 15px;
  width: 100px;
  margin-top: -10px;
  line-height: 50px;
  margin-left: -18px;
}
.nav_font3 p {
  height: 50px;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  font-size: 15px;
  width: 100px;
  margin-top: -10px;
  line-height: 50px;
  margin-left: -18px;
}

.nav_font4 p {
  height: 50px;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  font-size: 15px;
  width: 100px;
  margin-top: -10px;
  line-height: 50px;
  margin-left: -18px;
}
.nav_font5 p {
  height: 50px;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  font-size: 15px;
  width: 100px;
  margin-top: -10px;
  line-height: 50px;
  margin-left: -18px;
}
.nav_font6 p {
  height: 50px;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  font-size: 15px;
  width: 100px;
  margin-top: -10px;
  line-height: 50px;
  margin-left: -18px;
}
.nav_font7 p {
  height: 50px;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  font-size: 15px;
  width: 100px;
  margin-top: -10px;
  line-height: 50px;
  margin-left: -18px;
}
.nav_font8 p {
  height: 50px;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  font-size: 15px;
  width: 100px;
  margin-top: -10px;
  line-height: 50px;
  margin-left: -18px;
}
.nav_font9 p {
  height: 50px;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  font-size: 15px;
  width: 100px;
  margin-top: -10px;
  line-height: 50px;
  margin-left: -18px;
}

.top_box {
  margin-top: -20px;
  color: #fff;
  height: 100%;
}
.main_class {
  height: 600px;
  overflow-y: auto;
}
/deep/.el-image__inner {
  vertical-align: top;
  margin-top: -6px !important;
}
</style>